<template>
    <div id="wai">
        <div id="nei">
            <h1 class="title">{{ msg }}</h1><br />
            <label>商品名称：<input v-model="goods.goods_name" type="text" placeholder="商品名称"></label><br>
            <label>商品价格：<input v-model="goods.goods_prace" type="text" placeholder="价格"></label><br>
            <label>上架数量：<input v-model="goods.goods_count" type="number" placeholder="数量"></label><br>
            <label>商品描述：<input v-model="goods.goods_bewrite" type="text" placeholder="描述"></label><br>
            <label>封面的图片：<input type="file" ref="img1" @change="fengmian"></label><br>
            <label>第一张图片：<input type="file" ref="img2" @change="tupian1"></label><br>
            <label>第二张图片：<input type="file" ref="img3" @change="tupian2"></label><br>
            <label>第三张图片：<input type="file" ref="img4" @change="tupian3"></label><br>
            <button class="but" @click="refer_to">提交</button>
            <button class="but" @click="reset">重置</button>
        </div>
    </div>
</template>
                  
<script>


export default {
    data() {
        return {
            msg: '上架商品',
            goods: {
                goods_name: '',
                goods_prace: '',
                goods_count: '',
                goods_bewrite: '',
                session_id:''
            }
        }
    },
    methods: {
        fengmian(event) {
            this.fengmian = event.target.files[0];
        },
        tupian1(event) {
            this.tupian1 = event.target.files[0];
        },
        tupian2(event) {
            this.tupian2 = event.target.files[0];
        },
        tupian3(event) {
            this.tupian3 = event.target.files[0];
        },
        refer_to() {
            this.goods.session_id=this.$auth.getAuthorization();
            const formData = new FormData();
            formData.append('goods', JSON.stringify(this.goods));
            formData.append('image_fengmian', this.fengmian);
            formData.append('image1', this.tupian1);
            formData.append('image2', this.tupian2);
            formData.append('image3', this.tupian3);
            

            this.$http.post('upload_goods.php', formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data' // 设置请求头
                    }
                }).then(response => {
                    // this.imageUrl = response.data.imageUrl;
                    if(response.data.status===1){
                        this.reset();
                        alert('上传成功');
                    }else{
                        alert('上传失败');
                    }
                    console.log(response);
                })
                .catch(error => {
                    console.error(error);
                });
        },
        reset(){
            this.goods.goods_name='',
            this.goods.goods_prace='',
            this.goods.goods_count=0,
            this.goods.goods_bewrite='',
            this.$refs.img1.value=null,
            this.$refs.img2.value=null,
            this.$refs.img3.value=null,
            this.$refs.img4.value=null
        }

    },
    watch: {

    },
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}
#wai {
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    overflow: hidden;
    
    #nei{
        // border: 1px solid blue;
        margin:0% 5%;
        h1{
            font-size: 50px;
            margin-top: 1%;
        }
        input{
            font-size: 30px;
            margin-bottom: 2%;
            padding-top: 2%;
        }
        label{
            font-size: 30px;
            width: 100%;
        }
        .but{
            width: 20%;
            height: 50px;
            margin:0% 10%;
        }

    }


}
</style>
                                                                          